import 'package:flutter/material.dart';

class _TopBackClipper extends CustomClipper<Path> {
  final double _clipWidth;
  final double _borderRadius;
  _TopBackClipper({required double clipWidth, required double borderRadius}) : _clipWidth = clipWidth, _borderRadius = borderRadius;

  @override
  Path getClip(Size size) {
    var path = Path();
    path.moveTo(0, 0);
    path.lineTo(0, size.height / 2 + 0.1);
    path.lineTo(size.width / 2 - _clipWidth / 2, size.height / 2 + 0.1);
    path.lineTo(size.width / 2 - _clipWidth / 2,
        size.height / 2 - _clipWidth / 2 + _borderRadius);
    //左上角
    path.arcToPoint(Offset(size.width / 2 - _clipWidth / 2 + _borderRadius, size.height / 2 - _clipWidth / 2),
        radius: Radius.circular(_borderRadius));
    path.lineTo(size.width / 2 + _clipWidth / 2 - _borderRadius,
        size.height / 2 - _clipWidth / 2);
    //右上角
    path.arcToPoint(Offset(size.width / 2 + _clipWidth / 2, size.height / 2 - _clipWidth / 2 + _borderRadius),
        radius: Radius.circular(_borderRadius));
    path.lineTo(size.width / 2 + _clipWidth / 2, size.height / 2 + 0.1);
    path.lineTo(size.width, size.height / 2 + 0.1);
    path.lineTo(size.width, 0);
    path.close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) {
    return false;
  }
}


class _BottomBackClipper extends CustomClipper<Path> {
  final double _clipWidth;
  final double _borderRadius;
  _BottomBackClipper({required double clipWidth, required double borderRadius}) : _clipWidth = clipWidth, _borderRadius = borderRadius;

  @override
  Path getClip(Size size) {
    var path = Path();

    path.moveTo(0, size.height / 2);
    path.lineTo(size.width / 2 - _clipWidth / 2, size.height / 2);
    path.lineTo(size.width / 2 - _clipWidth / 2,
        size.height / 2 + _clipWidth / 2 - _borderRadius);
    //左下角
    path.arcToPoint(Offset(size.width / 2 - _clipWidth / 2 + _borderRadius, size.height / 2 + _clipWidth / 2 ),
        radius: Radius.circular(_borderRadius), clockwise: false);
    path.lineTo(size.width / 2 + _clipWidth / 2 - _borderRadius,
        size.height / 2 + _clipWidth / 2);
    //右下角
    path.arcToPoint(Offset(size.width / 2 + _clipWidth / 2, size.height / 2 + _clipWidth / 2 - _borderRadius),
        radius: Radius.circular(_borderRadius), clockwise: false);
    path.lineTo(size.width / 2 + _clipWidth / 2, size.height / 2);
    path.lineTo(size.width, size.height/2);
    path.lineTo(size.width, size.height);
    path.lineTo(0, size.height);
    path.close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) {
    return false;
  }
}


class ClipCenter extends StatefulWidget {
  final double boundWidth;//中心裁剪宽度
  final double borderRadius;
  final Color backgroundColor;
  const ClipCenter({Key? key, this.boundWidth = 100, this.borderRadius = 8, this.backgroundColor = Colors.black54}) : super(key: key);

  @override
  _ClipCenterState createState() => _ClipCenterState();
}

class _ClipCenterState extends State<ClipCenter> {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Positioned(
          top: 0,
          bottom: 0,
          left: 0,
          right: 0,
          child: ClipPath(
            clipper: _TopBackClipper(clipWidth: widget.boundWidth, borderRadius: widget.borderRadius),
            child: Container(
              color: widget.backgroundColor,
            ),
          ),
        ),
        Positioned(
          top: 0,
          bottom: 0,
          left: 0,
          right: 0,
          child: ClipPath(
            clipper: _BottomBackClipper(clipWidth: widget.boundWidth, borderRadius: widget.borderRadius),
            child: Container(
              color: widget.backgroundColor,
            ),
          ),
        ),
      ],
    );
  }
}
